<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" :width="width" :visible="visible" @ok="handleSubmit" @cancel="handleCancel" destroyOnClose>
    <PostionReqLockResumeForm ref="formComponent" @success="submitSuccess" :formDisabled="disableSubmit" :formBpm="false"></PostionReqLockResumeForm>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import {computed, defineComponent, defineExpose, nextTick, ref, unref} from 'vue';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import PostionReqLockResumeForm from './PostionReqLockResumeForm.vue';
import {useModalInner} from "@/components/Modal";

const emit = defineEmits(['register', 'success']);
const title = ref<string>('');
const width = ref<number>(900);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);

const getTitle = computed(() => (disableSubmit.value ? '新增' : '编辑'));
const formComponent = ref()
const isUpdate = ref(true);
const formDisabled = ref(false);

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
  isUpdate.value = !!data?.isUpdate;
  title.value = data?.isUpdate?'编辑':'新增'
  formDisabled.value = !data?.showFooter;
  if (unref(isUpdate)) {
    console.log('data', data)
    formComponent.value.edit(data.record)
  }else{
    formComponent.value.add()
  }
});

const [registerDrawer,{ closeDrawer }] = useDrawerInner((data) => {
  console.log('------:'+data.record.id)
  // formComponent.value.queryParam.value.id=1
  formComponent.value.handleQuery(data.record.id);

});
function handleSubmit() {
  formComponent.value.submitForm();
}

function submitSuccess(){
  console.log('submitSuccess')
  emit('success');
  // closeModal();
  closeDrawer();
}

function handleCancel() {
  visible.value = false;
}


defineExpose({
  registerModal,
  title,
  formComponent,
  formDisabled,
  handleSubmit,
  submitSuccess
});
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number){
  width: 100%
}

:deep(.ant-calendar-picker){
  width: 100%
}
</style>
